<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SpaceMax | Multi Purpose HTML Template</title>

<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">

<link href="fonts/sfuidisplay.css" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<link rel="stylesheet" href="css/plugins.min.css">

<link rel="stylesheet" href="css/app.css">

<link rel="stylesheet" href="css/custom.css">
</head>
<body class="theme-royal-blue" data-spy="scroll" data-target="#navbar-nav" data-animation="false" data-appearance="light">

<div class="switcher">
<div class="switcher__toggler d-flex flex-column align-items-center justify-content-center">
<button class="toggler__btn mb-1">
<img src="demo-assets/settings.png" alt="settings">
</button>
</div>
<div class="switcher-wrapper">

<div class="switcher-colors switcher-clone">
<h4 class="switcher__item-title">Change the color style</h4>
<ul class="switcher-tab">
<li class="switcher-tab__item">
<button class="tab-color active">Solid Colors</button>
</li>
<li class="switcher-tab__item">
<button class="tab-gradient">Gradient Colors</button>
</li>
</ul>
<div class="switcher-tab-content switcher-tab__color">
<ul class="switcher-color tab-color-clone active">
<li>
<button data-theme="theme-royal-blue" class="controller theme-royal-blue active"></button>
</li>
<li>
<button data-theme="theme-blue" class="controller theme-blue"></button>
</li>
<li>
<button data-theme="theme-amethyst" class="controller theme-amethyst"></button>
</li>
<li>
<button data-theme="theme-roman" class="controller theme-roman"></button>
</li>
<li>
<button data-theme="theme-amaranth" class="controller theme-amaranth"></button>
</li>
<li>
<button data-theme="theme-orange" class="controller theme-orange"></button>
</li>
<li>
<button data-theme="theme-green" class="controller theme-green"></button>
</li>
<li>
<button data-theme="theme-fern" class="controller theme-fern"></button>
</li>
</ul>
<ul class="switcher-gradient tab-color-clone">
<li>
<button data-theme="theme-gradient-1" class="controller bg-gradient--1"></button>
</li>
<li>
<button data-theme="theme-gradient-2" class="controller bg-gradient--2"></button>
</li>
<li>
<button data-theme="theme-gradient-3" class="controller bg-gradient--3"></button>
</li>
<li>
<button data-theme="theme-gradient-4" class="controller bg-gradient--4"></button>
</li>
<li>
 <button data-theme="theme-gradient-5" class="controller bg-gradient--5"></button>
</li>
<li>
<button data-theme="theme-gradient-6" class="controller bg-gradient--6"></button>
</li>
<li>
<button data-theme="theme-gradient-7" class="controller bg-gradient--7"></button>
</li>
<li>
<button data-theme="theme-gradient-8" class="controller bg-gradient--8"></button>
</li>
</ul>
</div>
</div>


<div class="canvas-style switcher-clone">
<h4 class="switcher__item-title">Canvas style</h4>
<ul class="switcher-tab">
<li class="switcher-tab__item">
<button class="tab-full active">Full </button>
</li>
<li class="switcher-tab__item">
<button class="tab-boxed">Boxed</button>
</li>
</ul>
<div class="switcher-tab-content switcher-tab__pattern">
<ul class="switcher-boxed">
<li>
<button data-theme="circle-pattern" class="pcontroller circle-pattern">
<img class="media__content" src="img/patterns/circle-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="circles-light" class="pcontroller circles-light">
<img class="media__content" src="img/patterns/circles-light.png" alt="">
</button>
</li>
<li>
<button data-theme="leaf-pattern" class="pcontroller leaf-pattern">
<img class="media__content" src="img/patterns/leaf-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="memphis-colorful" class="pcontroller memphis-colorful">
<img class="media__content" src="img/patterns/memphis-colorful.png" alt="">
</button>
</li>
<li>
<button data-theme="round-pattern" class="pcontroller round-pattern">
<img class="media__content" src="img/patterns/round-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="spiration-light" class="pcontroller spiration-light">
<img class="media__content" src="img/patterns/spiration-light.png" alt="">
</button>
</li>
<li>
<button data-theme="swirl-pattern" class="pcontroller swirl-pattern">
<img class="media__content" src="img/patterns/swirl-pattern.png" alt="">
</button>
</li>
<li>
<button data-theme="tic-tac-toe" class="pcontroller tic-tac-toe">
<img class="media__content" src="img/patterns/tic-tac-toe.png" alt="">
</button>
</li>
<li>
<button data-theme="x-pattern" class="pcontroller x-pattern">
<img class="media__content" src="img/patterns/x-pattern.png" alt="">
</button>
</li>
 <li>
<button data-theme="hexagon" class="pcontroller hexagon">
<img class="media__content" src="img/patterns/hexagon.png" alt="">
</button>
</li>
<li>
<button data-theme="curls" class="pcontroller curls">
<img class="media__content" src="img/patterns/curls.png" alt="">
</button>
</li>
<li>
<button data-theme="darkness" class="pcontroller darkness">
<img class="media__content" src="img/patterns/darkness.png" alt="">
</button>
</li>
<li>
<button data-theme="spiration-dark" class="pcontroller spiration-dark">
<img class="media__content" src="img/patterns/spiration-dark.png" alt="">
</button>
</li>
<li>
<button data-theme="zig-zag-wool" class="pcontroller zig-zag-wool">
<img class="media__content" src="img/patterns/zig-zag-wool.png" alt="">
</button>
</li>
</ul>
</div>
</div>


<div class="theme-variation switcher-clone">
<h4 class="switcher__item-title">Landing Pages</h4>
<div class="switcher-tab-content switcher-tab__variation">
<div class="demo-item">
<a href="index.html"><img src="demo-assets/home-1.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-2.html"><img src="demo-assets/home-2.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item active">
<a href="home-3.html"><img src="demo-assets/home-3.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-4.html"><img src="demo-assets/home-4.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

<div class="demo-item">
<a href="home-5.html"><img src="demo-assets/home-5.png" alt="image">
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>

</div>
</div>

</div>
</div>


<div class="preloader">
<div class="wrapper">
<div class="blobs">
<div class="blob-center"></div>
<div class="blob"></div>
<div class="blob"></div>
 <div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
<div>
<div class="loader-canvas canvas-left"></div>
<div class="loader-canvas canvas-right"></div>
</div>
</div>
</div>

<main class="main">

<header class="navbar navbar-sticky sticky-bg-color--primary navbar-expand-lg navbar-light">
<div class="container position-relative">
<a class="navbar-brand" href="index.html">
<img class="navbar-brand__regular" src="img/brand-logo-black.png" alt="brand-logo">
<img class="navbar-brand__sticky" src="img/brand-logo-white.png" alt="sticky brand-logo">
</a>

<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-inner mr-lg-auto pl-lg-2 pl-xl-6">

<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Landing Pages</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="index.html">Home - 1</a>
</li>
<li>
<a class="dropdown-item" href="home-2.html">Home - 2</a>
</li>
<li>
<a class="dropdown-item" href="home-3.html">Home - 3</a>
</li>
<li>
<a class="dropdown-item" href="home-4.html">Home - 4</a>
</li>
<li>
<a class="dropdown-item" href="home-5.html">Home - 5</a>
</li>
<li>
<a class="dropdown-item" href="home-6.html">Home-6</a>
</li>
<li>
<a class="dropdown-item" href="home-7.html">Home - 7</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inner-knowledgebase.html">Knowledgebase</a>
</li>
<li>
<a class="dropdown-item" href="inner-faq.html">FAQ</a>
</li>
 <li>
<a class="dropdown-item" href="inner-login.html">Login</a>
</li>
<li>
<a class="dropdown-item" href="inner-signup.html">Signup</a>
</li>
<li>
<a class="dropdown-item" href="inner-recover-account.html">Recover Account</a>
</li>
<li>
<a class="dropdown-item" href="inner-coming-soon.html">Coming Soon</a>
</li>
<li>
<a class="dropdown-item" href="inner-404.html">Error 404</a>
</li>
<li>
<a class="dropdown-item" href="inner-maintenance.html">Maintenance</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="javascript:;">Blog Pages</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="blog-grid-2-col.html">Blog Grid 2 Column</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-3-col.html">Blog Grid 3 Column</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-2-col-sidebar-left.html">Blog Sidebar Left</a>
</li>
<li>
<a class="dropdown-item" href="blog-grid-2-col-sidebar-right.html">Blog Sidebar right</a>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="javascript:;">Blog Details</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="blog-details-full.html">Blog Details Full</a>
</li>
<li>
<a class="dropdown-item" href="blog-details-sidebar-right.html">Blog Details Sidebar Right</a>
</li>
<li>
<a class="dropdown-item" href="blog-details-sidebar-left.html">Blog Details Sidebar Left</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="http://docs.tunerpixel.com/spacemax/">Documentation</a>
</li>
</ul>

</nav>
</div>
 <div class="mr-4 mr-lg-0">
<a href="#" class="btn btn-size--md rounded--full bg-white btn-hover--3d color--primary"><span class="btn__text font-w--500">Sign in</span></a>
</div>

</div>

</header>


<section class="hero hero--full hero--v10 d-flex align-items-center hidden">
<div class="svg-shape--top--right col-12 col-lg-6 p-0">
<div class="hero__diagonal-shape">
<img src="img/layout/diagonal-shape-1.svg" alt="wave" class="svg fill-primary-light--1 w-100">
</div>
</div>

<div class="container">
<div class="row flex-column-reverse flex-lg-row reveal">
<div class="col-12 col-md-10 col-lg-7 mx-auto mx-lg-0 text-center text-lg-left z-index2">
<div class="hero-content">
<h1 class="hero__title h2-font mb-2">Decentralized
<br> <span class="color--primary font-w--700">Cloud Data Storage</span></h1>
<p class="hero__description text-color--700 opacity--80 font-size--20 mb-3 mb-lg-4 pr-xl-10">Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops.</p>

<a href="#" class="btn btn-bg--cta--4 btn-hover--3d rounded--full">
<span class="btn__text">Get Started Now</span>
</a>

</div>

</div>

<div class="col-12 col-lg-6 mt-6 mt-lg-0 mb-4 mb-lg-0 pl-lg-4 pos-abs-lg-vertical-center pos-right hero__image">
<picture><img src="img/hero-10.png" alt="hero-image" class="img-fluid"></picture>
</div>

</div>

</div>
</section>


<section class="space bg-color--primary hidden" id="news">
<div class="svg-shape--top h-100">
<img src="img/layout/diagonal-shape-2.svg" class="svg h-100" alt="svg">
</div>

<div class="background-holder background--top--right">
<img src="img/layout/polygon-1.png" alt="wave" class="background-image-holder">
</div>

<div class="section-overlap bg-color--primary-light--1 pos-abs-bottom jsElement" data-height="275"></div>

<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-5 mt-lg-3 reveal text-center text-sm-left">
<span class="label label--sm label-bg--light--100 mb-2">Fresh updates</span>
<h2 class="mb-3">Latest from the newsroom</h2>
<p class="mb-5">SpaceMax is designed to pioneer the plasma architecture, the leading scalability solution for Ethereum Layer 2. The SpaceMax network is a stakeholder and infinitely scalable blockchain for plasma with a decentralized.</p>
<a href="#" class="btn btn--transparent color--white">
<span class="btn__text p-0"> Jump to the newsroom <i class="icon icon-arrow-right"></i>
</span>
</a>
</div>

<div class="col-8 col-sm-5 col-lg-3 remove-space-sm--bottom mt-8 mx-auto  mx-sm-0">
<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-1.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">13rd July, 2019</span>
<a href="#" class="card-title h6-font font-w--500 text-color--700 text-hover--primary mb-0">Computer Hardware Desktops And Notebooks.</a>
</div>
</div>

<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-2.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">13rd July, 2019</span>
<a href="#" class="card-title h6-font font-w--500 text-color--700 mb-0 text-hover--primary">SpaceMax Alpha is out now for developers.</a>
</div>
</div>

</div>

<div class="col-8 col-sm-5 col-lg-3 remove-space-sm--bottom mx-auto mx-sm-0">
<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-3.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">13rd July, 2019</span>
<a href="#" class="card-title h6-font font-w--500 text-color--700 mb-0 text-hover--primary">Computer Hardware Desktops And Notebooks.</a>
</div>
</div>

<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-4.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">13rd July, 2019</span>
<a href="#" class="card-title h6-font font-w--500 text-color--700 mb-0 text-hover--primary">SpaceMax Alpha is out now for developers.</a>
</div>
</div>

</div>

</div>

</div>
</section>


<section class="bg-color--primary-light--1">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 mx-auto text-center">
<div class="section-title mb-5 mb-lg-7 reveal">
<span class="label label--sm label-bg--light--200 color--primary mb-2">Why wre are</span>
<h2 class="h3-font">A revolutionary technology that <br>is secure and private.
</h2>
</div>
</div>
</div>

<div class="row flex-column-reverse flex-lg-row-reverse align-items-center text-center">
<div class="col-12 col-lg-6 d-md-flex d-lg-block text-md-left remove-space--bottom remove-space--x">
<div class="d-lg-flex mb-6 pr-md-3 reveal">
<span class="icon--lg color--white rounded-circle mb-3 mb-lg-0 mr-lg-4 jsElement" data-bg-color="#264EEE">
<i class="icon icon-key"></i>
</span>
<div>
<h3 class="h4-font font-w--600 mb-2">Completely Private</h3>
<p>Finding the perfect learning tool for Flash is a daunting task to any novice web developer. One can find help in a number and private tutors. These methods are readily available, nor cheap!</p>
</div>
</div>

<div class="d-lg-flex mb-6 pr-md-3 reveal">
<span class="icon--lg color--white rounded-circle mb-3 mb-lg-0 mr-lg-4 jsElement" data-bg-color="#92C75D">
<i class="icon icon-window-dev"></i>
</span>
<div>
<h3 class="h4-font font-w--600 mb-2">Open Source</h3>
<p>If you are looking at blank cassettes on the web, you may be very confused at the price. SpaceMax is designed to the plasma architecture. The network is decentralized.</p>
</div>
</div>

</div>

<div class="col-12 col-lg-6 mb-3 mb-lg-0 pr-lg-6">
<picture>
<img class="img-fluid" src="img/illustration-12.png" alt="illustration">
</picture>
</div>

</div>

<div class="row flex-column-reverse flex-lg-row space align-items-center text-center">
<div class="col-12 col-lg-6 d-md-flex d-lg-block text-md-left remove-space--bottom remove-space--x">
<div class="d-lg-flex mb-6 pr-md-3 reveal">
<span class="icon--lg color--white rounded-circle mb-3 mb-lg-0 mr-lg-4 jsElement" data-bg-color="#DA5A63">
<i class="icon icon-card-update"></i>
</span>
<div>
<h3 class="h4-font font-w--600 mb-2">Easy to Use</h3>
<p>Finding the perfect learning tool for Flash is a daunting task to any novice web developer. One can find help in a number and private tutors. These methods are readily available, nor cheap!</p>
</div>
</div>

<div class="d-lg-flex mb-6 pr-md-3 reveal">
<span class="icon--lg color--white rounded-circle mb-3 mb-lg-0 mr-lg-4 jsElement" data-bg-color="#278AF0">
<i class="icon icon-money-bag"></i>
</span>
<div>
<h3 class="h4-font font-w--600 mb-2">Far More Affordable</h3>
<p>If you are looking at blank cassettes on the web, you may be very confused at the price. SpaceMax is designed to the plasma architecture. The network is decentralized.</p>
</div>
</div>

</div>

<div class="col-12 col-lg-6 mb-3 mb-lg-0 pl-lg-6">
<picture>
<img class="img-fluid" src="img/illustration-13.png" alt="illustration">
</picture>
</div>

</div>

</div>
</section>


<section class="space--bottom bg-color--primary-light--1">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 mx-auto d-md-flex justify-content-between remove-space--bottom reveal">
<div class="d-flex flex-column text-center mb-3 mb-lg-0">
<span class="h2-font color--primary mb-1">5.6PB</span>
<span class="font-size--20 text-color--400">Storage Capacity</span>
</div>

<span class="mt-2 d-none d-md-inline-block"><img src="img/layout/indicator-dots.svg" alt="indicator-dots" class="svg fill--primary"></span>

<div class="d-flex flex-column text-center mb-3 mb-lg-0">
<span class="h2-font color--primary mb-1">985</span>
<span class="font-size--20 text-color--400">Storage Providers</span>
</div>
<span class="mt-2 d-none d-md-inline-block"><img src="img/layout/indicator-dots.svg" alt="indicator-dots" class="svg fill--primary"></span>


<div class="d-flex flex-column text-center mb-3 mb-lg-0">
<span class="h2-font color--primary mb-1">305TB</span>
<span class="font-size--20 text-color--400">Used Storage</span>
</div>

</div>
</div>
</div>
</section>


<section class="space roadmap--v4 bg-color--primary">
<div class="background-holder background--top--left">
<img src="img/layout/diagonal-shape-4.png" alt="wave" class="background-image-holder">
</div>

<div class="background-holder background--bottom--right">
<img src="img/layout/polygon-2.png" alt="wave" class="background-image-holder">
</div>

<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 mx-auto text-center">
<div class="section-title mb-5 mb-lg-7 reveal">
<span class="label label--sm label-bg--light--100 mb-2">Roadmap</span>
<h2 class="h3-font">Upcoming Milestones.
</h2>
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div class="roadmap-items d-flex flex-wrap reveal">
<div class="roadmap-item roadmap-item--past">
<div class="timeline-info font-w--700 color--white mb-6 mb-lg-8">
<span class="h6-font d-block mb-1">2019 Q1</span>
<span class="h5-font d-block">Nodes Alpha</span>
</div>
<div class="timeline-content">
<span class="timeline-line"></span>
 <div class="content-body bg-white rounded--05 px-2 py-3 bg-white">
<p class="font-size--16 text-color--400">Building the MVP to showcase the technology: <a href="#" class="color--primary">example.com/SpaceMax-tech</a></p>
</div>
</div>
</div>

<div class="roadmap-item roadmap-item--current">
<div class="timeline-info font-w--700 color--white mb-6 mb-lg-8">
<span class="h6-font d-block mb-1">2019 Q2</span>
<span class="h5-font d-block">Used Alpha</span>
</div>
<div class="timeline-content">
<span class="timeline-line timeline-line--current"></span>
<div class="content-body bg-white rounded--05 px-2 py-3">
<p class="font-size--16 text-color--400">Testnet LIVE: <a href="#" class="color--primary">example.com/testnet</a></p>
</div>
</div>
</div>

<div class="roadmap-item roadmap-item--future">
<div class="timeline-info font-w--700 color--white mb-6 mb-lg-8">
<span class="h6-font d-block mb-1">2019 Q3</span>
<span class="h5-font d-block">Network Beta</span>
</div>
<div class="timeline-content">
<span class="timeline-line timeline-line--future"></span>
<div class="content-body bg-white rounded--05 px-2 py-3">
<p class="font-size--16 text-color--400">Every avid independent filmmaker has dreamed about making that special interest documentary.</p>
</div>
</div>
</div>

<div class="roadmap-item roadmap-item--future">
<div class="timeline-info font-w--700 color--white mb-6 mb-lg-8">
<span class="h6-font d-block mb-1">2019 Q4</span>
<span class="h5-font d-block">Partner Connection</span>
</div>
<div class="timeline-content">
<span class="timeline-line timeline-line--future"></span>
<div class="content-body bg-white rounded--05 px-2 py-3">
<p class="font-size--16 text-color--400">In the last five to six years the FTA satellite receiver has become an everyday household electronic device.</p>
</div>
</div>
</div>

</div>

</div>

</div>

<div class="row text-center mt-5 reveal">
<div class="col-12">
<p class="opacity--100">Follow our progress on and plans on our <a href="#" class="color--green"><u>public roadmap</u></a>.</p>
</div>
</div>

</div>
</section>


<section class="space bg-color--primary-light--1">
<div class="svg-shape hero__diagonal-shape">
<img src="img/layout/diagonal-shape-6.svg" alt="wave" class="svg w-100">
</div>

<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 mx-auto text-center">
<div class="section-title mb-5 mb-lg-7 reveal">
<span class="label label--sm label-bg--light--200 color--primary mb-2">Pricing</span>
<h2 class="h3-font">Choose the most suitable service for your needs with reasonable price.</h2>
</div>
</div>
</div>

<div class="row justify-content-center remove-space--bottom reveal">
<div class="col-12 col-sm-6 col-lg-5 col-xl-4 mb-3 mb-sm-0">
<div class="card card-hover--shadow border--none box-shadow--3 bg-color--primary color--white align-items-center pt-5 pb-6 px-4">
<span class="label label--lg label-bg--light--100 font-w--400 mb-5">Storage</span>
<span class="icon--9x mb-3"><i class="icon icon-server-rack"></i></span>
<span class="h2-font font-w--700 mb-1">$ 0.015</span>
<span class="h6-font font-w--700">Per GB Per Month</span>
</div>

</div>
<div class="col-12 col-sm-6 col-lg-5 col-xl-4 mb-3 mb-sm-0">
<div class="card card-hover--shadow border--none box-shadow--3 bg-color--green color--white align-items-center pt-5 pb-6 px-4">
<span class="label label--lg label-bg--light--100 font-w--400 mb-5">Bandwith</span>
<span class="icon--9x mb-3"><i class="icon icon-cloud-download-93"></i></span>
<span class="h2-font font-w--700 mb-1">$ 0.05</span>
<span class="h6-font font-w--700">Per GB Per Month</span>
</div>

</div>

</div>

<div class="row">
<div class="col-12 d-flex flex-column align-items-center justify-content-center my-5 my-lg-7 reveal">
<span class="text-color--400 mb-2">* Terms are subject to change</span>
<a href="#" class="btn rounded--full btn-bg--primary--05 btn-hover--3d color--primary"><span class="btn__text">Join the Developer Waitlist</span></a>
</div>
</div>
</div>
</section>


<section class="space--bottom learn pt-8 bg-color--primary-light--1 hidden">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-6">
<div class="section-title mb-5 mb-lg-7 reveal">
<span class="label label--sm label-bg--light--200 color--primary mb-2">Learn</span>
<h2 class="h3-font mb-2">SpaceMax Research</h2>
<p>SpaceMax is designed to pioneer the plasma architecture, the leading scalability solution. The network is a stakeholder and infinitely scalable blockchain for plasma.</p>
</div>
</div>
</div>

</div>

<div class="switchable switchable--reverse d-lg-flex align-items-md-start">
<div class="col-12 col-lg-5 col-xl-6 mb-40 mb-lg-0 text-center mb-3 reveal">
<span class="switchable__image">
<img class="img-fluid" src="img/macbook-air-dashboard.png" alt="device">
<a class="lightbox pos-abs-center" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=aRh_eUQSmIg">
<span class="btn btn-media btn-media-size--lg btn-bg--primary rounded--full box-shadow--3"><i class="icon icon-triangle-right"></i></span>
</a>
</span>
</div>

<div class="switchable__content">
<div class="container">
<div class="row justify-content-center justify-content-lg-start">
<div class="px-3 px-md-0 remove-space--bottom card--v2">
<div class="card border--none flex-row align-items-end mb-3 jsElementFocus focused reveal">
<div class="card-body py-5 pl-4 pr-1">
<a href="#" class="card__title h4-font font-w--700 mb-2">Whitepaper</a>
<p class="font-size--16">White papers are published on the Web and in print by researchers, organization vendors and consultants.</p>
</div>
<a href="#" class="icon--md bg-color--green rounded-circle color--white m-2">
<i class="icon icon-data-download"></i>
</a>
</div>

<div class="card border--none flex-row align-items-end mb-3 jsElementFocus reveal">
<div class="card-body py-5 pl-4 pr-1">
<a href="#" class="card__title h4-font font-w--700 mb-2">Onepager</a>
<p class="font-size--16">White papers are published on the Web and in print by researchers, organization vendors and consultants.</p>
</div>
<a href="#" class="icon--md bg-color--green rounded-circle color--white m-2">
<i class="icon icon-data-download"></i>
</a>
</div>

<div class="card border--none flex-row align-items-end mb-3 jsElementFocus reveal">
<div class="card-body py-5 pl-4 pr-1">
<a href="#" class="card__title h4-font font-w--700 mb-2">Q3 Town Hall Recap</a>
<p class="font-size--16">Every avid independent filmmaker has dreamed about making that special interest documentary.</p>
</div>
<a href="#" class="icon--md bg-color--green rounded-circle color--white m-2">
<i class="icon icon-arrow-right"></i>
</a>
</div>

</div>

</div>

</div>

</div>

</div>

</section>


<section>
<div class="section-overlap bg-color--primary-light--1 pos-abs-top jsElement" data-height="50%"></div>

<div class="container">
<div class="row">
<div class="col-12">
<div class="newsletter-form form--v3 position-relative d-lg-flex align-items-center bg-color--primary rounded--10 py-4 p-lg-4 p-xl-7">
<div class="svg-shape--top--right h-100">
<img src="img/layout/diagonal-shape-7.svg" alt="wave" class="svg h-100">
</div>

<div class="col-12 col-lg-6 pr-lg-5 mb-3 mb-lg-0 text-center text-lg-left reveal">
<h2 class="h3-font color--white">Subscribe our newsletter and get useful information every week</h2>
</div>

<div class="col-12 col-md-10 col-lg-6 mx-md-auto">
<form action="#" class="form bg-color--white-opacity--10 rounded--05 p-1 reveal">
<div class="input-group d-flex">
<input type="email" class="form-control" placeholder="Enter your email" required>
<button class="btn btn-hover--splash btn-bg--primary" type="submit"><span class="btn__text"><i class="icon icon-arrow-right"></i></span></button>
</div>
</form>

</div>
</div>
</div>

</div>

</div>

</section>


<section class="space--bottom pt-8">
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<div class="icon-fill--wide text-center d-lg-flex justify-content-lg-center flex-wrap reveal">
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-telegram-plane"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">telegram</span>
</a>
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-reddit-alien"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">subreddit</span>
</a>
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-slack"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">slack</span>
</a>
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-linkedin-in"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">linkedin</span>
</a>
<a class="t-icon box-shadow--5 rounded--05 m-1 btn-hover--primary" href="#">
<span class="t-icon__brand-icon h4-font text-color--400"><i class="fab fa-twitter"></i></span>
<span class="t-icon__brand-name h5-font font-w--500 text-color--700">twitter</span>
</a>
</div>

</div>

</div>

</div>

</section>


<footer class="footer footer--v2 bg-color--primary section--dark position-relative hidden">
<div class="svg-shape--top h-100">
<img src="img/layout/polygon-3.svg" alt="wave" class="svg h-100">
</div>

<div class="svg-shape--top--right h-100">
<img src="img/layout/diagonal-shape-3.svg" alt="wave" class="svg h-100">
</div>

<div class="container">
<div class="row">
<div class="col-12 col-md-9 col-lg-4 mb-4 mb-xl-0">
<div class="pr-xl-3">
<span class="mb-3">
<img src="img/brand-logo-white.png" alt="brand-logo">
</span>
<p class="color--white opacity--80">The main objectives of the project are to meet the needs of cryptocurrency projects and users, and to provide access to investment product.</p>
</div>
</div>

<div class="col-6 col-md-4 col-lg-4 col-xl-2 mb-2 mb-xl-0">
<div class="widget widget-nav">
<span class="widget__title font-size--20 font-w--700 mb-1">Useful Link</span>
<ul>
<li><a href="#">How it works</a></li>
<li><a href="#">Token sale details</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Roadmap</a></li>
<li><a href="#">Documents</a></li>
</ul>
</div>
</div>

<div class="col-6 col-md-4 col-lg-4 col-xl-2 offset-xl-1 mb-2 mb-xl-0">
<div class="widget widget-nav">
<span class="widget__title font-size--20 font-w--700 mb-1">Documents</span>
<ul>
<li><a href="#">Whitepaper</a></li>
<li><a href="#">Onepager</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Agreement</a></li>
</ul>
</div>
</div>

<div class="col-6 col-md-4 col-xl-3">
<span class="widget__title font-size--20 font-w--700 mb-1">Address</span>
<p class="font-size--16 color--white">SpaceMax PTE. LTD. 167 Jalan Bukit Merah #05-12 Connection One Singapore (150167)</p>
</div>

</div>
</div>
</footer>

</main>
<script src="js/plugins.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>